<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./artTemplate-master/dist/template-native.js"></script>
    <script type="text/template" id="code1">
    <table border="1" width="600">
        <thead>
        <% for(var i = 0; i < title.length;i++) { %>
        <td><%= title[ i ] %></td>
        <% } %>
        </thead>
        <tbody>
          <% for(var i = 0; i < datas.length; i++) { %>
                <% if ( !datas[ i ].isShow ) continue;%>
          <tr>
              <td><%= datas[i]['name']%></td>
              <td><%= datas[i].age %></td>
              <td><%= datas[i]['gender']%></td>
          </tr>
          <% } %>
        </tbody>
    </table>
</script>
    <script type="text/template" id="code">
        <ul>
            <% for(var i=0; i< datas.length; i++) { %>
            <li>
                <ul>
                    <% for (var k in datas[ i ]) { %>
                    <li><%= datas[ i ][ k ]%></li>
                    <% } %>
                </ul>
            </li>
            <% } %>
        </ul>
    </script>
</head>
<body>
<input type="text" name="" id="txt"/><input type="button" value="查询" id="btn"/>
<div></div>
<script>
    var obj = {
        "title":['name','age','gender'],
        datas:[
            {name:'jim123',age:19,gender:'男',isShow:true},
            {name:'jim1',age:19,gender:'男',isShow:true},
            {name:'tom',age:19,gender:'男',isShow:true},
            {name:'jim13',age:19,gender:'男',isShow:true},
            {name:'jack',age:19,gender:'男',isShow:true},
            {name:'jim3',age:19,gender:'男',isShow:true},
            {name:'jim23',age:19,gender:'男',isShow:true},
            {name:'jim2',age:19,gender:'男',isShow:true},
            {name:'jm',age:19,gender:'男',isShow:true},
            {name:'haha',age:19,gender:'男',isShow:true},
            {name:'hyea',age:19,gender:'男',isShow:true},
            {name:'Mars',age:19,gender:'男',isShow:true},
            {name:'hn',age:19,gender:'男',isShow:true}
        ]
    };
//控制显示用的逻辑
    var container = document.querySelectorAll('div')[ 0 ],
            txt = document.querySelectorAll('#txt')[ 0 ],
            btn = document.querySelectorAll('#btn')[ 0 ];
    //页面渲染
    function reader(){
        container.innerHTML = template('code',obj);
    }
    reader();
    btn.onclick = function(){
        //根据用户的输入 处理数据
        var text = txt.value;
        if(text.trim().length == 0) return;
        //我要处理的是数据的筛选 v值 i索引
        obj.datas.forEach(function(v,i){
            //判断v中的isShow,用v中的name和 text判断
            //当用户输入的值（text）与数据库值（name）相同时   利用isShow进行判断显示出来
            v.isShow = v.name == text;
        });
        //渲染
        reader();
        console.log('over');
    }

    //因此会将代码进行解耦
    //我们将页面的逻辑分解为
    // 1 用于展示数据的模板部分，它控制着如何显示
    // 2 用于最终显示的数据，数据部分，只是用来被处理，不参与让任何逻辑
    // 3 用于连接这俩个部分，并从中起到协调，控制等功能


    //MVC思想
    // M:model数据模型，一条数据好比一个对象，因此将数据称为对象模型
    // V:View视图，用于控制如何显示
    // C:controller 控制器，连接 模型与视图，起到控制，协调的功能

</script>
</body>
</html>